<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/14
  Time: 9:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>选择课程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <br/>
                <%--        定义一个表格--%>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" id="table_id" lay-filter="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<%--行工具条--%>
<script type="text/html" id="barDemo">
    <a title="角色设置" lay-event="empRole" style="cursor:pointer">
        <i class="layui-icon">&#xe620;</i>
    </a>
    <a title="编辑" lay-event="update" style="cursor:pointer">
        <i class="layui-icon">&#xe642;</i>
    </a>
    <a title="删除" lay-event="del" style="cursor:pointer">
        <i class="layui-icon">&#xe640;</i>
    </a>

</script>


<script>
    layui.use(['laydate','form','table'], function(){
        var  form = layui.form;
        var table = layui.table;


        // 生成表格
        table.render({
            id:"dataTable",//
            elem: '#table_id',//指定表格元素
            url: '${AppPath}/score/findByEmpId',  //请求路径
            cellMinWidth: 10//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
            ,even: true    //隔行换色
            // ,page: true  //开启分页
            // ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            // ,limit: 10 //每页默认显示的数量
            ,method:'post'  //提交方式
            // ,toolbar: '#all_btn'
            // ,done: function(res, curr, count) { //表格数据加载完后的事件
            //     //调用示例
            //     layer.photos({//点击图片弹出
            //         photos: '.layer-photos-demo'
            //         ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            //     });
            //     //如果是异步请求数据方式，res即为你接口返回的信息。
            //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            //     console.log(res);
            //
            //     //得到当前页码
            //     console.log(curr);
            //
            //     //得到数据总量
            //     console.log(count);
            // }
            ,cols: [
                [
                    {
                        field: 'courseId', //json对应的key
                        title: '请选择班级',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        align:'center',
                        templet:function(d){
                            return '<a href="${AppPath}/score/addForm?classId='+d.classId.classId+'&courseId='+d.courseId.courseId+'">'+d.classId.className+d.courseId.courseName+'</a>'
                        }//读出外键关系的对象
                    },
                ]]

        })



        //监听行工具条
        table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.ajax({
                        url:'${AppPath}/emp/deleteById',
                        data:{'empId':data.empId},
                        type:'post',
                        success:function (resp) {
                            if (resp=='ok') {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.msg('删除成功', {icon: 1,time:1000});

                            }
                        }
                    })
                    layer.close(index);
                });
            } else if(layEvent === 'update'){ //编辑
                //do something
                //同步更新缓存对应的值
                //主窗口代码
                layer.open({
                    type: 2,
                    title: "修改员工",
                    shade: 0.5,
                    area: ['600px', '600px'],
                    anim: 2,
                    content: ['${AppPath}/emp/formUpdate'],
                    success: function (layero, index) {
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(data)//向此iframe层方法 传递参数
                    },
                });
            }else{
                layer.open({
                    type: 2,
                    title: "分配角色",
                    shade: 0.5,
                    area: ['800px', '300px'],
                    anim: 2,
                    content: ['${AppPath}/empRole/formAssignEmpRole'],
                    success: function (layero, index) {
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(data.empId)//向此iframe层方法 传递参数
                    },
                });
            }


        });
        // 添加头工具监听
        table.on('toolbar(dataTable)', function(obj){
            var checkStatus = table.checkStatus('dataTable');
            var data = checkStatus.data;
            var length=data.length;
            switch(obj.event){
                case 'delAll':
                    if (length==0){
                        layer.alert('请至少选择1个');
                    }else{
                        delAll();
                    }

                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };

            // 多选删除
            function delAll (argument) {
                var ids = [];
                var names=[];
                // 获取选中的id
                $.each(data,function(index, emp) {
                    ids.push(emp.empId)
                    names.push(emp.empName)
                });
                layer.confirm('确认要删除吗？'+names.toString(),function(index){
                    //捉到所有被选中的，发异步进行删除
                    $.ajax({
                        url:'${AppPath}/emp/deleteById',
                        data:{'empId':ids},
                        type:'post',
                        traditional:true,
                        success:function (resp) {
                            if (resp=='ok') {
                                layer.msg('删除成功', {icon: 1,time:1000});
                                $(".layui-form-checked").not('.header').parents('tr').remove();
                            }
                        }
                    })
                });
            }

        });

        // //  复选框监听
        // table.on('checkbox(dataTable)', function(obj){
        //      //当前是否选中状态
        //     var checked=obj.checked;
        //     //选中行的相关数据
        //     var data=obj.data;
        //     //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        //     var type=obj.type;
        //
        // });


    });




</script>
</html>